@inject ManagerLocalizer Localizer

<div id="postSettings" class="modal modal-panel fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- Header -->
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title"><i class="fas fa-cog"></i> @Localizer.General["Settings"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a href="#" class="nav-link" :class="{ active: selectedSetting === 'uid-settings' }" v-on:click.prevent="selectSetting('uid-settings')">@Localizer.General["General"]</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" :class="{ active: selectedSetting === 'uid-seo' }" v-on:click.prevent="selectSetting('uid-seo')">@Localizer.General["SEO"]</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" :class="{ active: selectedSetting === 'uid-sharing' }" v-on:click.prevent="selectSetting('uid-sharing')">@Localizer.General["Sharing"]</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" :class="{ active: selectedSetting === 'uid-advanced' }" v-on:click.prevent="selectSetting('uid-advanced')">@Localizer.General["Advanced"]</a>
                </li>
                <li class="nav-item" v-for="region in settingRegions">
                    <a href="#" class="nav-link" :class="{ active: selectedSetting === region.meta.uid }" v-on:click.prevent="selectSetting(region.meta.uid)">{{ region.meta.name }}</a>
                </li>
            </ul>

            <!-- Body -->
            <div class="modal-body bg-light">
                <div :class="{ 'd-none': selectedSetting != 'uid-settings' }">
                    <div class="form-group" v-if="usePrimaryImage">
                        <label>@Localizer.Content["Primary image"]</label>
                        <div class="block image-block primary-image primary-image-modal">
                            <div class="block-body has-media-picker rounded" :class="{ empty: primaryImage.id === null }">
                                <img class="rounded" :src="primaryImageUrl">
                                <div class="media-picker">
                                    <div class="btn-group float-right">
                                        <button v-on:click.prevent="selectPrimaryImage" class="btn btn-primary text-center">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button v-on:click.prevent="removePrimaryImage" class="btn btn-danger text-center">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                    <div class="card text-left">
                                        <div class="card-body" v-if="primaryImage.id === null">
                                            &nbsp;
                                        </div>
                                        <div class="card-body" v-else>
                                            {{ primaryImage.media.filename }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.General["Slug"]</label>
                        <div class="input-group">
                            <input v-model="slug" type="text" maxlength="128" class="form-control">
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(slug) + "/128" }}
                                </div>
                            </div>
                        </div>
                        <span class="field-description small text-muted">
                            {{ piranha.utils.getOrigin() + "/" }}<span v-text="slug"></span>
                        </span>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.General["Publish date"]</label>
                        <div class="row">
                            <div class="col">
                                <datepicker v-model="published" :format="'yyyy-MM-dd'" :monday-first="true" :typeable="true" :bootstrap-styling="true"></datepicker>
                            </div>
                            <div class="col"></div>
                        </div>
                    </div>
                    <div class="form-group" v-if="useExcerpt">
                        <label>@Localizer.Content["Excerpt"]</label>
                        <div v-if="useHtmlExcerpt" class="block text-block ingress" :class="{ empty: isExcerptEmpty }">
                            <div id="excerpt-toolbar" class="component-toolbar"></div>
                            <div id="excerpt-body" class="block-body html-block" contenteditable="true" v-html="excerpt" v-on:blur="onExcerptBlur">
                            </div>
                        </div>
                        <div v-else class="input-group below">
                            <textarea v-model="excerpt" rows="5" maxlength="1000" class="form-control"></textarea>
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(excerpt) + "/1000" }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div :class="{ 'd-none': selectedSetting != 'uid-seo' }">
                    <div class="form-group">
                        <label>@Localizer.Page["Meta title"]</label>
                        <div class="input-group">
                            <input v-model="metaTitle" type="text" maxlength="128" class="form-control" :placeholder="title">
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(metaTitle) + "/128" }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.Page["Meta keywords"]</label>
                        <div class="input-group">
                            <input v-model="metaKeywords" type="text" maxlength="128" class="form-control">
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(metaKeywords) + "/128" }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.Page["Meta description"]</label>
                        <div class="input-group">
                            <textarea v-model="metaDescription" rows="5" maxlength="255" class="form-control"></textarea>
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(metaDescription) + "/255" }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="metaIndex">@Localizer.Content["Meta index"]</label>
                        <div class="form-switch">
                            <button id="metaIndex" v-on:click.prevent="metaIndex = !metaIndex" class="switch" :aria-pressed="metaIndex"><span></span></button>
                            <label for="metaIndex" class="form-check-label">@Localizer.Post["If the post should be indexed by search engines."]</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="metaFollow">@Localizer.Content["Meta follow"]</label>
                        <div class="form-switch">
                            <button id="metaFollow" v-on:click.prevent="metaFollow = !metaFollow" class="switch" :aria-pressed="metaFollow"><span></span></button>
                            <label for="metaFollow" class="form-check-label">@Localizer.Post["If links from this post should be indexed."]</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="d-flex">
                            <label><strong>@Localizer.Content["Meta priority"]</strong></label>
                            <span class="ml-auto">{{ metaPriorityDescription }}</span>
                        </div>
                        <input v-model="metaPriority" type="range"  class="custom-range" min="0" max="1" step="0.1">
                        <small>@Localizer.Content["Search engine priority, compared to other content in the same site."]</small>
                    </div>
                </div>

                <div :class="{ 'd-none': selectedSetting != 'uid-sharing' }">
                    <div class="form-group">
                        <label>@Localizer.Page["Og title"]</label>
                        <div class="input-group">
                            <input v-model="ogTitle" type="text" maxlength="128" class="form-control" :placeholder="metaTitle !== null && metaTitle !== '' ? metaTitle : title">
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(ogTitle) + "/128" }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.Page["Og image"]</label>
                        <image-field v-bind:uid="'og_image_' + id" v-bind:meta="{ placeholder: null }" v-bind:model="ogImage"></image-field>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.Page["Og description"]</label>
                        <div class="input-group">
                            <textarea v-model="ogDescription" rows="5" maxlength="255" class="form-control" :placeholder="metaDescription"></textarea>
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(ogDescription) + "/255" }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div :class="{ 'd-none': selectedSetting != 'uid-advanced' }">
                    <div class="form-group">
                        <label for="enableComments">@Localizer.General["Comments"]</label>
                        <div class="form-switch">
                            <button id="enableComments" v-on:click.prevent="enableComments = !enableComments" class="switch" :aria-pressed="enableComments"><span></span></button>
                            <label for="enableComments" class="form-check-label">@Localizer.Post["If comments should be enabled for this post"]</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.Comment["Days allowed for commenting"]</label>
                        <input type="number" v-model.number="closeCommentsAfterDays" class="form-control">
                        <span v-if="enableComments === false" class="field-description small text-muted">
                            @Localizer.Comment["Comments are not allowed."]
                        </span>
                        <span v-else-if="published === null" class="field-description small text-muted">
                            @Localizer.Comment["Comments are not allowed for unpublished content."]
                        </span>
                        <span v-else-if="closeCommentsAfterDays === 0 || isCommentsOpen()" class="field-description small text-muted">
                            @Localizer.Comment["Comments are currently open."]
                        </span>
                        <span v-else class="field-description small text-muted">
                            @Localizer.Comment["Comments were closed"] {{ commentsClosedDate() }}.
                        </span>
                    </div>
                    <div class="form-group" v-if="routes && routes.length > 1">
                        <label>@Localizer.General["Route"]</label>
                        <select v-model="selectedRoute" class="form-control">
                            <option :value="route" v-for="route in routes">{{ route.title }}</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.General["Redirect"]</label>
                        <div class="input-group">
                            <input v-model="redirectUrl" type="text" maxlength="256" class="form-control">
                            <div class="input-group-append">
                                <div class="input-group-text text-muted">
                                    {{ piranha.utils.strLength(redirectUrl) + "/256" }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>@Localizer.General["Redirect Type"]</label>
                        <select v-model="redirectType" class="form-control" :disabled="redirectUrl === null || redirectUrl.length === 0">
                            <option v-if="redirectUrl !== null && redirectUrl.length > 0" value="Permanent">@Localizer.General["Permanent"]</option><option v-else value="Permanent"></option>
                            <option v-if="redirectUrl !== null && redirectUrl.length > 0" value="Temporary">@Localizer.General["Temporary"]</option><option v-else value="Temporary"></option>
                        </select>
                    </div>
                    <div v-if="permissions.length > 0" class="row">
                        <div class="col">
                            <div class="form-group">
                            <label>@Localizer.General["Permissions"]</label>
                                <span v-if="selectedPermissions.length > 0" class="field-description small text-muted d-block">
                                    @Localizer.Post["By specifying one or more permissions only authenticated users will have access to the post."]
                                </span>
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div v-for="permission in permissions" class="col-sm-4">
                                                <div class="checkbox">
                                                    <label class="mb-0">
                                                        <input v-model="selectedPermissions" type="checkbox" :value="permission.key"> {{ permission.value }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="region" :class="{ 'd-none': selectedSetting != region.meta.uid }" v-for="region in settingRegions">
                    <region v-bind:content="'post'" v-bind:type="typeId" v-bind:model="region"></region>
                </div>
            </div>
        </div>
    </div>
</div>
